<!-- Template Setting -->
<template>
  <el-drawer :visible.sync="dialogStatus"
             size="85%"
             append-to-body
             style="position:fixed;width:100%;height:100%;top:0;left:0;z-index:2013;"
             direction='rtl'>

    <!-- <el-dialog :visible.sync="dialogStatus"
             width="950px"> -->
    <div slot="title"
         style="fontSize:1.2em;fontWeight:bold;color:#333;">
      {{ $t('custom.workSchedule.template.templateSetting') }}
    </div>
    <el-card shadow='never'
             class="scroll-css card-template">
      <div>
        <el-button type="primary"
                   size="mini"
                   @click="addTemplate">{{ $t('custom.workSchedule.template.addBtn') }}</el-button>
      </div>
      <el-table :data="dataList">
        <el-table-column prop="name"
                         fixed="left"
                         align="center"
                         :label="$t('custom.workSchedule.template.listTitleName')"></el-table-column>
        <el-table-column prop="template.timezone"
                         align="center"
                         label="Timezone"></el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.monday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'MONDAY') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.tuesday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'TUESDAY') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.wednesday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'WEDNESDAY') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.thursday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'THURSDAY') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.friday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'FRIDAY') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.saturday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'SATURDAY') }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('custom.workSchedule.listTitle.sunday')"
                         align="center">
          <template slot-scope="scope">
            {{ computedSchedule(scope.row.template.scheduleData, 'SUNDAY') }}
          </template>
        </el-table-column>
        <el-table-column label="Action"
                         fixed="right"
                         align="center">
          <template slot-scope="scope">
            <el-button size="mini"
                       @click="editItemTemplate(scope.row.id)"
                       type="text">{{ $t('custom.workSchedule.template.edit') }}</el-button>
            <el-button size="mini"
                       @click="deleteItemTemplate(scope.row.id)"
                       style="color:#F56C6C;"
                       type="text">{{ $t('custom.workSchedule.template.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination background
                     layout="total, sizes, prev, pager, next, jumper"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     :page-sizes="$store.state.app.pageOptions.pageSizes"
                     :pager-count="$store.state.app.pageOptions.pageCount"
                     :current-page="pageOptions.currentPage"
                     :total="pageOptions.total">
      </el-pagination> -->
    </el-card>
    <!-- </el-dialog> -->
    <AddOrEditTemplate ref="add-template"
                       @updateListData='getDataList()' />
  </el-drawer>
</template>

<script>
import AddOrEditTemplate from './add-or-edit-template'

export default {
  components: { AddOrEditTemplate },
  data () {
    return {
      dialogStatus: false,
      dataList: []
      // pageOptions: {
      //   currentPage: 1,
      //   pageSize: 10,
      //   total: 66
      // }
    }
  },
  watch: {
    dialogStatus (val) {
      if (val) {
        this.getDataList()
      }
    }
  },
  methods: {
    editItemTemplate (id) {
      this.$refs['add-template'].openDialog('edit', id)
    },
    deleteItemTemplate (templateId) {
      const deleteAction = id => {
        this.$interface.schedule.deleteTemplateListApi(id)
          .then(({ data: res }) => {
            this.loadingForDeleteBtn = false
            if (res.code !== 0) {
              return this.$message.error(res.msg)
            }
            this.getDataList()
            this.$message.success(res.msg)
          })
          .catch(() => { })
      }
      this.$confirm(
        this.$t('custom.workSchedule.template.sureDeleteTips'),
        this.$t('custom.workSchedule.template.tips'),
        {
          confirmButtonText: this.$t('custom.workSchedule.template.confirm'),
          cancelButtonText: this.$t('custom.workSchedule.template.cancel'),
          type: 'warning',
          center: true
        }
      ).then(() => {
        deleteAction(templateId)
      }).catch(() => { })
    },
    getDataList () {
      const params = {
        type: 'work_schedule'
        // tenantCode: this.$store.state.user.tenantCode
        //   current: currentPage || this.pageOptions.currentPage,
        //   size: this.pageOptions.pageSize
      }
      this.$interface.schedule.getTemplateListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataList = res.data.map(e => {
            e.template = JSON.parse(e.template)
            return e
          })
        })
        .catch(() => { })
    },
    // currentChange (e) {
    //   if (e) {
    //     this.getDataList(e)
    //   }
    // },
    // sizeChange (e) {
    //   this.pageOptions.currentPage = 1
    //   this.pageOptions.pageSize = e
    //   if (e) {
    //     this.getDataList()
    //   }
    // },
    openDialog () {
      this.dialogStatus = true
    },
    closeDialog () {
      this.dialogStatus = false
    },
    addTemplate () {
      this.$refs['add-template'].openDialog('add')
    },
    computedSchedule (list, day) {
      let info = list.find(e => e.dayOfWeek === day)
      // if (!info.beginTime && !info.endTime) {
      //   return 'No Set'
      // } else {
      return `${info.beginTime} - ${info.endTime}`
      // }
    }
  }
}
</script>

<style scoped lang='scss'>
.card-template {
  margin: 0 12px;
  height: calc(100vh - 45px - 32px - 12px);
}
</style>
